<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一隅立画</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="./css/workstarckdetail.css"/>
		<link rel="stylesheet" type="text/css" href="./css/sidebar.css"/>
		<link rel="stylesheet" type="text/css" href="./viewer/dist/viewer.min.css"/>
		<link rel="stylesheet" type="text/css" href="./css/basestyle.css"/>
		<script src="js/head.js" type="text/javascript"></script>
		<script src="js/xshead.js" type="text/javascript"></script>
		<script src="js/base.js"></script>
	</head>
	<body>
		<!-- 详情 -->
		<div class="content">
			<div class="container">
				<div class="row">
					<div id="app" class=" col-lg-8 col-md-8">
						<div ref="allpopup" style="display: none;">
							<div class="detail">
								<div class="detailtitle">
									<div class="detailtitlele">
										<p v-show="languagestatus == 1">{{pagelist.sheji_competition_title}}</p>
										<p v-show="languagestatus == 2">{{pagelist.sheji_competition_titleE}}</p>
									</div>
									<div class="detailtitleri">
										<div class="detailtitleridianzan detailtitleriitem" @click="dianzan(pagelist.likestatus)">
											<div class="detailtitleridianzanimg">
												<img v-show="pagelist.likestatus == 0" src="./images/dainzan_icon.png" >
												<img v-show="pagelist.likestatus == 1" src="./images/dianzan_icon_hover.png" >
											</div>
											<div class="detailtitleridianzannum">
												<span>{{pagelist.like}}</span>
											</div>
										</div>
										<div class="detailtitlericollection detailtitleriitem" @click="shoucang(pagelist.collstatus)">
											<div class="detailtitlericollectionimg">
												<img v-show="pagelist.collstatus == 0" src="./images/weishoucnag.png" >
												<img v-show="pagelist.collstatus == 1" src="images/yishoucang.png" >
											</div>
											<div class="detailtitlericollectionnum" v-show="languagestatus == 1">
												<span v-show="pagelist.collstatus == 0">收藏</span>
												<span v-show="pagelist.collstatus == 1" style="color: #ed0a23;">已收藏</span>
											</div>
											<div class="detailtitlericollectionnum" v-show="languagestatus == 2">
												<span v-show="pagelist.collstatus == 0">Collection</span>
												<span v-show="pagelist.collstatus == 1" style="color: #ed0a23;">Collected</span>
											</div>
										</div>
									</div>
									<div class="clear"></div>
								</div>
								<div class="detaildata">
									<span>{{pagelist.createtime}}</span>
								</div>
								<div v-show="languagestatus == 1" v-html="pagelist.content" style="margin-top: 0.16rem;" class="detailcontent">
								</div>
								<div v-show="languagestatus == 2" v-html="pagelist.Econtent" style="margin-top: 0.16rem;" class="detailcontent">
								</div>
							</div>
							<div id="ylImg">
								<div class="detailImg" v-for="(item,index) in pagelist.image" :key="index">
									<div class="detailImgnav">
										<img class="imgs" @click="parviewimages" :src="item" alt="">
									</div>
								</div>
							</div>
							<div class="pinglun">
								<div class="pingluntitle">
									<div class="pingluntitlele">
										<p v-show="languagestatus == 1">用户评价</p>
										<p v-show="languagestatus == 2">User evaluation</p>
									</div>
									<div class="pingluntitleri" @click="openpage">
										<p v-show="languagestatus == 1">评论</p>
										<p v-show="languagestatus == 2">comment</p>
									</div>
									<div class="clear"></div>
								</div>
								<div class="pinglunlist">
									<div class="pinglunitem" v-for="(item , index) in commentlist" :key="index">
										<div class="pinglunitemup">
											<div class="pinglunitemper">
												<div class="pinglunitemperimg">
													<img :src="item.avatar" >
												</div>
												<div class="pinglunitempertxt">
													<p>{{item.nickname}}</p>
												</div>
												<div class="clear"></div>
											</div>
											<div class="pinglunitemdata">
												<span>{{item.createtime}}</span>
											</div>
											<div class="clear"></div>
										</div>
										<div class="pinglunitemdown">
											<p>{{item.content}}</p>
										</div>
										<div class="pinglunitemline"></div>
									</div>
									<div class="pinglunlistmore" v-show="count > 4" @click="moreloading">
										<p v-show="languagestatus == 1">点击加载更多</p>
										<p v-show="languagestatus == 2">Click to load more</p>
									</div>
								</div>
							</div>
							<!-- 评论弹窗 -->
							<div v-show="pageindex == 1" class="commentpopup">
								<div class="commentpopupnav">
									<div class="commentpopupwarp">
										<div class="commentpopupclose" @click="closepage">
											<img src="./images/common_close.png" >
										</div>
										<div class="clear"></div>
										<div class="commentpopuptitle">
											<p v-show="languagestatus == 1">请输入评论内容</p>
											<p v-show="languagestatus == 2">Please enter comments</p>
										</div>
										<div class="commentpopupipt">
											<textarea v-model="commontxt" class="commentpopupiptcontent" rows="" cols="" @keyup.enter="fabucommon"></textarea>
										</div>
										<div class="commentpopupbtn" @click="fabucommon">
											<p v-show="languagestatus == 1">发布</p>
											<p v-show="languagestatus == 2">release</p>
										</div>
									</div>
								</div>
							</div>
							<!-- 提示弹窗 -->
							<div v-show="tip == 1" class="commentpopup">
								<div class="commentpopupnav">
									<div class="commentpopupwarp">
										<div class="commentpopupclose" @click="closepagetip">
											<img src="./images/common_close.png" >
										</div>
										<div class="clear"></div>
										<div class="commentpopuptitle">
											<p v-show="languagestatus == 1">暂无更多数据</p>
											<p v-show="languagestatus == 2">No more data available</p>
										</div>
										<div class="commentpopupbtn" @click="closepagetip">
											<p v-show="languagestatus == 1">好的</p>
											<p v-show="languagestatus == 2">OK</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="worksider" class=" col-lg-4 col-md-4">
						<script src="js/worksidebar.js" type="text/javascript"></script>
					</div>
				</div>
			</div>
		</div>
		
		<script src="js/pcFooter.js" type="text/javascript"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="viewer/dist/viewer.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
		<script type="text/javascript">
			// 内容
			let app = new Vue({
				el:'#app',
				data:{
					pagelist:[],
					commentlist:[],
					userid:'',
					token:'',
					pageId:'',
					pageindex :0,
					tip:0,
					commontxt:'',
					totalnum:4,
					count:'',
					languagestatus:'',
				},
				mounted:function() {
					let that = this
					var url = location.search
					var theRequest = new Object()
					if ( url.indexOf( "?" ) != -1 ) {  
					  var str = url.substr( 1 ); //substr()方法返回从参数值开始到结束的字符串；  
					  var strs = str.split( "&" );  
					  for ( var i = 0; i < strs.length; i++ ) {  
					    theRequest[ strs[ i ].split( "=" )[ 0 ] ] = ( strs[ i ].split( "=" )[ 1 ] );  
					  }  
						console.log(  url); //此时的theRequest就是我们需要的参数；  
						that.pageId = theRequest.id
						console.log(that.pageId)
					}
					if (localStorage.getItem('logininfo')) {
						console.log('isdfksjdf sd')
						let obj = JSON.parse(localStorage.getItem('logininfo'));
						console.log(obj)
						that.loginstatus = 1
						that.userid = obj.userid
						that.token = obj.token
					}
					if (localStorage.getItem('userinfo')) {
						let obj = JSON.parse(localStorage.getItem('userinfo'));
						console.log(obj)
						that.loginstatus = 1
						that.username = obj.nickname
						that.icon = obj.avatar
					}
					if (sessionStorage.getItem('languagestatus')) {
						let languagestatus = sessionStorage.getItem('languagestatus')
						this.languagestatus = languagestatus
					}
					that.getpagelist()
					that.getcommentlist()
					this.$refs.allpopup.style.display = 'block'
				},
				methods:{
					// 预览
					parviewimages(){
						let viewer = new Viewer(document.getElementById('ylImg'), {
							// 配置\
							filter(selector){
								return selector.className == 'imgs' ? true : false; 
							}
						})
					},
					// 时间
						add0(m){return m<10?'0'+m:m },
						getLocalTime(nS) {
						   let time = new Date(parseInt(nS)*1000);
						   var y = time.getFullYear();
						   var m = time.getMonth()+1;
						   var d = time.getDate();
						   var h = time.getHours();
						   var mm = time.getMinutes();
						   var s = time.getSeconds();
						   return y+'-'+this.add0(m)+'-'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm);
						},
						getfabuTime(nS) {
						   let time = new Date(parseInt(nS)*1000);
						   var y = time.getFullYear();
						   var m = time.getMonth()+1;
						   var d = time.getDate();
						   return y+'-'+this.add0(m)+'-'+this.add0(d);
						},
					// 作品列表
					getpagelist:function(){
						let that = this
						axios.get('http://admin.yiyulihua.com/api/sheji.track/text',{
							params:{
								userid:that.userid,
								token:that.token,
								id:that.pageId
							}
						})
						.then((res) =>{
							console.log(res)
							if(res.data.code == 1){
								that.pagelist = res.data.data.track
								res.data.data.track.createtime = that.getfabuTime(res.data.data.track.createtime)
							}
						})
					},
					// 评价列表
					getcommentlist:function(){
						let that = this
						axios.get('http://admin.yiyulihua.com/api/sheji.track/evaluate',{
							params:{
								userid:that.userid,
								token:that.token,
								id:that.pageId,
								number:that.totalnum
							}
						})
						.then((res) =>{
							console.log(res)
							if(res.data.code == 1){
								that.commentlist = res.data.data.evaluate
								that.count = res.data.data.num
								let list = res.data.data.evaluate
								list.forEach((item,index) =>{
									item.createtime = that.getLocalTime(item.createtime)
								})
							}
						})
					},
					// 点赞
					dianzan:function(type){
						let that = this,idsList = that.idsList
						let pagelist = that.pagelist;
						if(type == 0){
							type = 1
						}else if(type == 1){
							type = 0
						}
						// console.log(type)
						axios.get('http://admin.yiyulihua.com/api/sheji.track/like',{
							params:{
								userid:that.userid,
								token:that.token,
								id:that.pageId,
								type:type
							}
						})
						.then((res) =>{
							// console.log(pagelist)
							if(pagelist.likestatus == 1){
								pagelist.likestatus = 0;
								pagelist.like--;
							}else if(pagelist.likestatus == 0){
								pagelist.likestatus = 1;
								pagelist.like++
							}
							that.pagelist = pagelist
						})
					},
					// 收藏
					shoucang:function(type){
						let that = this
						let pagelist = that.pagelist;
						if(type == 0){
							type = 1
						}else if(type == 1){
							type = 0
						}
						axios.get('http://admin.yiyulihua.com/api/sheji.track/collection',{
							params:{
								userid:that.userid,
								token:that.token,
								id:that.pageId,
								type:type
							}
						})
						.then((res) =>{
							if(pagelist.collstatus == 1){
								pagelist.collstatus = 0;
							}else if(pagelist.collstatus == 0){
								pagelist.collstatus = 1;
							}
							that.pagelist = pagelist
						})
					},
					// 打开评论弹窗
					openpage:function(){
						this.pageindex = 1
					},
					// 关闭评论弹窗
					closepage:function(){
						this.pageindex = 0
					},
					// 发布评论
					fabucommon:function(){
						let that = this
						console.log(that.commontxt)
						axios.get('http://admin.yiyulihua.com/api/sheji.track/add',{
							params:{
								userid:that.userid,
								token:that.token,
								id:that.pageId,
								content:that.commontxt
							}
						})
						.then((res) =>{
							that.pageindex = 0
							that.getcommentlist()
						})
					},
					// 加载更多
					moreloading:function(){
						let that = this
						that.totalnum = that.totalnum + 4
						if(that.totalnum >= that.count){
							that.totalnum = that.count
						}
						
						that.getcommentlist()
					},
					// 关闭弹窗
					closepagetip:function(){
						this.tip = 0
					}
				}
			})
			
			
		</script>
	</body>
</html>
